@import "./reset";
@import "./element";

// 自定义滚动条样式
// 纵向滚动条
@mixin scroll-bar($width: 10px) {

  /*定义滚动条外层轨道的样式*/
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    // background-color: rgba(255,255,255,0);
  }

  /*定义滚动条整体的样式*/
  &::-webkit-scrollbar {
    width: $width;
    // height: 100px;
    background-color: rgba(255, 255, 255, 0);
  }

  /*滚动条里面可以拖动的那个*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

// @mixin justify-center {
//   display: flex;
//   justify-content: center;
// }

// @mixin align-center {
//   display: flex;
//   align-items: center;
// }

// @mixin flex-center {
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

body {
  min-width: 800px;
  @include scroll-bar;
}

section {
  background-color: #fff;
  padding-bottom: 14vh;
}

.f-headline,
.f-title {
  color: #000;
  margin: 0;
  padding: 0;
}

// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.f-title-wrap {
  text-align: center;
  margin: 0;
  padding-bottom: 7.9vh;
}

.f-title {
  font-weight: 700;
  font-size: 2.6vw;
  line-height: 1.41;
}

.f-describe {
  font-weight: 400;
  font-size: 0.8vw;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0;
}

.f-sticky-content {
  padding-top: 19vh;
  position: sticky;
  top: 0;
  box-sizing: border-box;
}

.f-section {
  padding: 19vh 0 5vh;
  box-sizing: border-box;
}

.f-title-wrap {
  text-align: center;
  margin: 0;
  padding-bottom: 7.9vh;
}

// .f-title-night {
//   color: #fff;
// }

.f-describe-night {
  color: hsla(0, 0%, 100%, 0.5);
}

.f-label {
  font-weight: 600;
  font-size: 2.1vw;
  line-height: 1.39;
  color: #000;
  margin: 0;
  padding: 0;
}

.f-headline {
  font-weight: 600;
  font-size: 80px;
  line-height: 113px;
}

.f-section-night {
  background-color: #000;
}